<template>
    <div class="resource">
        <Header></Header>
        <Breadcrumb :breadcrumb="breadcrumb" @onClick="onClick"></Breadcrumb>
        <div class="resource-content">
            <div class="res-header">
                <div class="tabs-list">
                    <div
                        v-for="(item, index) in tabsList"
                        :key="index"
                        :class="{ 'tabs-item': true, 'tabs-item-active': index === currentIndex }"
                        @click="handleTabClick(index)">
                        <img v-if="item.spacer" :src="index === currentIndex ? item.activeSrc : item.spacer" alt="">
                        <span>{{ item.name }}</span>
                    </div>
                </div>
                <div class="res-type">
                    <p>资料类型：</p>
                    <div class="typelist">
                        <span v-for="(item, index) in typeList" :key="index" :class="index === currentTypeIndex ? 'typeActive' : ''" @click="handleTypeClick(item, index)">{{ item.name }}</span>
                    </div>
                </div>
            </div>
            <div class="res-list">
                <div class="res-title">
                    <p class="mianfei" :class="isFree ? 'res-title-active' : ''" @click="handleFreeClick">
                        <span>免费资料区</span>
                        <b v-if="isFree"></b>
                    </p>
                    <div class="xueyuan" :class="isStudent ? 'res-title-active' : ''" @click="handleStudentClick">
                        <p>学员资料专区</p>
                        <span>学员专用</span>
                        <b v-if="isStudent"></b>
                    </div>
                </div>
                <div class="res-item" v-for=" (item, index) in resourceList" :key="index" >
                    <div class="item-left">
                        <img v-if="item.file_type === 'docx' || item.file_type === 'doc'" src="../../assets/icons/word.png" alt="">
                        <img v-else-if="item.file_type === 'xslx' || item.file_type === 'xlsx'" src="../../assets/icons/excel.png" alt="">
                        <img v-else-if="item.file_type === 'mp4'" src="../../assets/icons/video.png" alt="">
                        <img v-else-if="item.file_type === 'png' || item.file_type === 'jpg' || item.file_type === 'jpeg'" src="../../assets/icons/image.png" alt="">
                        <img v-else-if="item.file_type === 'pdf'" src="../../assets/icons/pdf.png" alt="">
                        <img v-else-if="item.file_type === 'pptx' || item.file_type === 'ppt'" src="../../assets/icons/ppt.png" alt="">
                        <div class="left-text">
                            <p>{{ item.name }}</p>
                            <div class="text-bottom">
                                <span class="free" v-if="item.is_free == 1">免费</span>
                                <span>{{ item.file_size }}</span>
                                <span>{{ item.file_type }}文件</span>
                            </div>
                        </div>
                    </div>
                    <div class="item-right">
                        <a target="_blank" :href="item.file_path" :download="item.file_path">下载</a>
                    </div>
                </div>
                <Empty v-if="resourceList.length === 0"></Empty>
            </div>
        </div>
        <a-modal
            v-model="modal2Visible"
            title="提示"
            centered
            cancelText="取消"
            okText="确定"
            @ok="() => (modal2Visible = false)">
            <p style="text-align: center;">未加入班级的学生，无法查看哦！需要观看完整版，</p>
            <p style="text-align: center;">请联系老师加入班级吧～</p>
        </a-modal>
        <Footer></Footer>
    </div>
</template>
<script>
import Header from "../../components/Header.vue";
import Footer from "../../components/Footer.vue";
import Breadcrumb from "../../components/Breadcrumb.vue";
import Empty from "../../components/empty.vue";
export default {
    name: "Resource",
    components: { Header, Footer, Breadcrumb, Empty },
    data() {
        return {
            breadcrumb: [
                { name: '首页', type: '/' },
                { name: '学习中心', type: '/news' },
                { name: '公共课堂', type: '/newsDetail' },
                { name: '知识科普', type: '/newsDetail' },
            ],
            currentIndex: 0,
            current: 2,
            tabsList: [],
            typeList: [],
            currentTypeIndex: 0,
            resourceList: [],
            params: {
                type: '1', // 1-免费，2-学员
                page_size: 10,
                cat_id: '',
            },
            modal2Visible: false,
            isFree: true,
            isStudent: false,
        }
    },
    mounted() {
        this.getResourceCat();
    },
    methods: {
        onClick(item) {
            console.log(item)
        },
        handleTabClick(index) {
            this.currentIndex = index;
            this.currentTypeIndex = 0;
            this.typeList = this.tabsList[index].childlist || [];
            this.params.cat_id = this.typeList[0].id;
            this.getResourceList();
        },
        handleFreeClick() {
            this.params.type = '1';
            this.isFree = true;
            this.isStudent = false;
            this.getResourceList();
        },
        handleStudentClick() {
            // this.modal2Visible = true;
            this.params.type = '2';
            this.isStudent = true;
            this.isFree = false;
            this.getResourceList();
        },
        async getResourceCat() {
            const res = await this.$request.get('api/school/resource_cat_list');
            console.log(res, 'res===');
            if (res.code == 1) {
                this.tabsList = res.data || [];
                this.typeList = this.tabsList[0].childlist || [];
                this.params.cat_id = this.typeList[0].id;
                this.getResourceList();
            }
        },
        async getResourceList() {
            const res = await this.$request.get(`api/school/resource_list?type=${this.params.type}&page_size=${this.params.page_size}&cat_id=${this.params.cat_id}`);
            // console.log(res, 'res===');
            if (res.code == 1) {
                this.resourceList = res.data.data || [];
            } else {
                this.resourceList = [];
                this.$message.error(res.msg);
            }
        },
        handleTypeClick(item, index) {
            this.currentTypeIndex = index;
            this.params.cat_id = item.id;
            this.getResourceList();
        },
        setModal1Visible(modal1Visible) {
            this.modal1Visible = modal1Visible;
        }
    }
}
</script>
<style lang="less" scoped>
.resource-content{
    .res-header{
        max-width: 1200px;
        margin: 0px auto 20px auto;
        padding: 10px 20px;
        background: #FFFFFF;
        box-shadow: 0px 0px 10px 0px rgba(0,69,207,0.08);
        border-radius: 12px;
    }
    .tabs-list{
        display: flex;
        justify-content: space-between;
        padding-bottom: 24px;
        border-bottom:  1px solid #F0F0F0;;
        .tabs-item{
            width: 371px;
            height: 58px;
            background: #EDF6FF;
            border-radius: 8px;
            line-height: 58px;
            display: flex;
            justify-content: center;
            cursor: pointer;
            img{
                width: 25px;
                height: 25px;
                margin-top: 16px;
                margin-right: 10px;
            }
            span{
                font-weight: 500;
                font-size: 17px;
                color: #0085FF;
            }
            &.tabs-item-active{
                cursor: pointer;
                background: #0085FF;
                span{
                    color: #fff;
                }
            }
        }
    }
    .res-type{
        display: flex;
        align-items: center;
        padding-top: 24px;
        p{
            text-align: left;
            font-weight: 500;
            font-size: 17px;
            color: #000000;
            margin-bottom: 0px;
        }
        .typelist{
            display: flex;
            span{
                font-weight: 400;
                font-size: 14px;
                color: #000000;
                width: 100px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                cursor: pointer;
            }
            & .typeActive{
                background: #EDF5FF;
                border-radius: 8px;
                border: 1px solid #78A9FF;
                font-size: 14px;
                color: #0080FF;
            }
        }
    }
    .res-list{
        background: #FFFFFF;
        box-shadow: 0px 0px 12px 0px rgba(0,69,207,0.08);
        border-radius: 12px;
        max-width: 1200px;
        margin: 20px auto;
        padding: 20px;
        .res-title{
            font-weight: 400;
            font-size: 24px;
            color: #1D2129;
            text-align: left;
            display: flex;
            border-bottom: 1px solid #F0F0F0;
            margin-bottom: 0px;
            cursor: pointer;
            .xueyuan{
                position: relative;
                margin-left: 88px;
                span{
                    width: 58px;
                    height: 20px;
                    line-height: 20px;
                    background: linear-gradient( #FF7A38 0%, #FF8D2B 100%);
                    border-radius: 2px;
                    display: block;
                    text-align: center;
                    font-weight: 400;
                    font-size: 12px;
                    color: #FFFFFF;
                    position: absolute;
                    right: -60px;
                    top: -6px;
                }
            }
            .mianfei{
                &.res-title-active{
                    color: #0080FF;
                    font-weight: bold;
                    margin-bottom: 0px;
                }
            }
            b{
                width: 70px;
                height: 6px;
                background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
                border-radius: 7px;
                display: block;
                margin: 20px auto 0 auto;
            }
            
        }
        .res-item{
            display: flex;
            justify-content: space-between;
            margin-top: 32px;
            padding-bottom: 32px;
            border-bottom: 1px solid #F0F0F0;
            .item-left{
                display: flex;
                img{
                    width: 50px;
                    height: 62px;
                    margin-right: 17px;
                }
                .left-text{
                    p{
                        font-weight: 400;
                        font-size: 15px;
                        color: #000000;
                        text-align: left;
                    }
                    .text-bottom{
                        display: flex;
                        span{
                            font-weight: 400;
                            font-size: 14px;
                            color: #000000;
                            display: block;
                            margin-right: 20px;
                        }
                        .free{
                            color: #FF8A2D;
                        }
                    }
                }
            }
            .item-right{
                cursor: pointer;
                a{
                    width: 134px;
                    height: 50px;
                    line-height: 50px;
                    background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
                    border-radius: 100px;
                    font-weight: 400;
                    font-size: 16px;
                    color: #FFFFFF;
                    display: block;
                }
            }
        }
    }
}
/deep/ .ant-modal-content{
    width: 456px;
    height: 234px;
    background: linear-gradient( 180deg, #DFF1FF 0%, #FFFFFF 100%);
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
    border-radius: 8px;
}
/deep/ .ant-modal-header{
    background: none;
    border-bottom: none;
    font-weight: 500;
    font-size: 18px;
    color: #000000;
}
/deep/ .ant-modal-footer{
    text-align: center;
    border-top: none;
}
</style>